<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">体重</view>
    <view class="bubble-box">
      <view class="bubbleCard margin-v--normal">
        <view class="bubbleCard__main">
          <view class="bubbleCard__text">{{ weight}}</view>
          <view class="bubbleCard__unit">kg</view>
        </view>
        <view class="bubbleCard__sub">
          <view class="bubbleCard__unit">BMI</view>
          <view class="bubbleCard__text bubbleCard__text--small">{{bmi||"--"}}</view>
        </view>
      </view>
    </view>
    <view v-if="waringText" class="waring">{{ waringText }}</view>

    <view class="margin-v--normal">
      <line-chart-tab-group :forceHidden="isCreateActionSheetOpen">
        <template v-slot:week>
          <line-chart :config="weekChartData" v-if="weekChartData" id="weight-weekly-chart"></line-chart>
        </template>
        <template v-slot:month>
          <line-chart :config="monthChartData" v-if="monthChartData" id="weight-month-chart"></line-chart>
        </template>
      </line-chart-tab-group>
    </view>
    <view class="height-spacer"></view>
    <view class="margin-v--normal fix-bottom">
      <button class="button--block button--purple" @tap="showCreateActionSheet">添加数据</button>
    </view>
    <!--    底部操作栏-->
    <AtModal :isOpened="isCreateActionSheetOpen" :onClose="closeCreateActionSheet" v-if="isCreateActionSheetOpen">
      <AtModalContent>
        <view class='input-row'>
          <view class='input-row__label'>体重</view>
          <view class='input-row__content'><input v-model="weightInput" type="digit" placeholder='kg'/></view>
        </view>
      </AtModalContent>
      <AtModalAction>
        <button @tap="addRecord" class="custom-button">提交</button>
      </AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import LineChart from "../../../common-components/line-chart/line-chart";
import {getHistoryData, updateWeight,getUserProfileDataToday} from "../../../services/healthy-data-service";
import LineChartTabGroup from "../../../business-component/line-chart-tab-group/line-chart-tab-group"
import findIndex from 'lodash.findindex';
import get from 'lodash.get';
import {AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui-vue'

/**
 bmi: 10
 bone: 10
 muscle: 0
 pbf: 10
 water: 0
 weight: 10
 */
export default {
  name: "index",
  components:{
    LineChart,
    helloTitle,
    LineChartTabGroup,
    AtModal, AtModalContent, AtModalAction
  },
  computed:{
    waringText() {
      if (this.bmi < 18.5) {
        return '警告：您的体重偏低，请注意营养补充'
      }

      if (this.bmi >= 24  && this.bmi <=27.9) {
        return '警告：您目前属于超重，请及时进行体重管理'
      }

      if (this.bmi >= 28) {
        return '警告：您目前属于肥胖，请及时减重避免其他疾病产生'
      }
      return '';
    }
  },
  data(){
    return {
      chartDateType:1,
      weekChartData:null,
      monthChartData:null,
      todayData:null,
      latestData:null,
      bone: 10,
      muscle: 0,
      pbf: 10,
      water: 0,
      weight: 10,
      bmi:0,
      isCreateActionSheetOpen: false,
      bmiInput: "",
      boneInput: "",
      muscleInput: "",
      pbfInput: "",
      waterInput: "",
      weightInput: "",
    }
  },
  methods:{
    async addRecord(){
      await updateWeight({
        weight:this.weightInput,
        bone:this.boneInput,
        bmi:this.bmiInput,
        water:this.waterInput,
        pbf:this.pbf,
        muscle:this.muscleInput,
      });
      await this.initData();
    },
    showCreateActionSheet() {
      this.isCreateActionSheetOpen = true;
    },
    closeCreateActionSheet() {
      this.isCreateActionSheetOpen = false;
    },
    async initData(){
      this.isCreateActionSheetOpen = false;
      this.latestData = await getUserProfileDataToday()
      console.log(this.latestData)
      const weekResult = await getHistoryData("DAY_OF_WEEK", "WEIGHT");
      const monthResult = await getHistoryData("DAY_OF_WEEK", "WEIGHT");
      const todayData = weekResult[weekResult.length-1].value;
      console.log("今日体重数据",todayData);
      const weight = get(this.latestData,"data.data.bodyProfile.weight",0);
      this.bmi = get(this.latestData,"data.data.bodyProfile.bmi",0);
      this.bone = get(todayData,"bone");
      this.water = get(todayData,"water");
      this.pbf = get(todayData,"pbf");
      console.log("todayDataWeight:",todayData);
      this.muscle = get(todayData,"muscle");
      this.weight = weight;
      console.log("体重数据",weekResult);
      this.weekChartData = this.formatChartData(weekResult,7);
      this.monthChartData = this.formatChartData(monthResult,30);
    },
    showWeekChart() {
      this.chartDateType = 1;
    },
    showMonthChart() {
      this.chartDateType = 2;
    },
    // 把数据格式化成 ${daysNumber} 天的数据
    formatChartData(data, daysNumber: number) {
      const baseConfig = {
        yAxis: {
          unit: 1,
          base: 0,
          top: 140,
          display: [
            // 必须按顺序
            {value: 0, label: "00"},
            {value: 50, label: "50"},
            {value: 100, label: "100"},
            {value: 140, label: "140"},
          ],
        },
        dataset: [],
      }
      for (let i = 1; i <= daysNumber; i++) {
        const index = findIndex(data, (item) => item.dayOfWeek === i);
        baseConfig.dataset.push({value: get(data[index], "value.weight", 0)});
      }
      return baseConfig;
    }
  },
  async created() {
    await this.initData();
  },

}
</script>
